<script setup lang="ts">
import { ref, watch } from 'vue'
import { RouterView } from 'vue-router'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeIndex = ref('')

watch(
  () => route.path,
  newVal => {
    console.log(newVal, 'ss')
    activeIndex.value = newVal
  },
  {
    immediate: true,
  },
)
</script>
<template>
  <el-menu
    router
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
  >
    <el-menu-item index="/add">添加</el-menu-item>
    <el-menu-item index="/edit">修改</el-menu-item>
    <el-menu-item index="/nocache">查看(这里做不缓存对比)</el-menu-item>
  </el-menu>
  <div style="margin-top: 20px">
    <router-view v-slot="{ Component }">
      <keep-alive include="AddForm">
        <component :is="Component" :key="route.path" />
      </keep-alive>
    </router-view>
  </div>
</template>
